<template>
  <div class="task">
    <div class="task-header">
      <div class="task-header-border"></div>
      <div class="task-header-title">
        <i class="task-header-title-icon el-icon-s-grid"></i>
        <h2 class="task-header-title-name">我参与的任务</h2>
        <el-select style="margin-left: 10px" size="mini" @change="statusClick" clearable v-model="listQuery.status"
                   placeholder="请选择">
          <el-option
              v-for="item in taskStatusForm"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="task-header-actions">
        <el-tooltip class="item" effect="dark" content="刷新" placement="right">
          <i class="task-header-actions-icon el-icon-refresh" :class="[loading == true&&refresh==true?'refreshRe':'']"
             @click="refreshClick"></i>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="上移" placement="right">
          <i class="el-icon-top upwardTitle" v-if="itemIndex != 0" @click="upClick"></i>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="下移" placement="right">
          <i class="el-icon-bottom upwardTitle" v-if="itemIndex != 2" @click="downClick"></i>
        </el-tooltip>
      </div>
    </div>
    <div style="flex: 1;display: flex;flex-direction: column;overflow-y: auto;margin: 2px 20px" v-loading="loading"
         v-if="permissionTask()">
      <div class="task-content">
        <el-tabs v-model="activeName" @tab-click="tabClick">
          <el-tab-pane label="全部" name=""></el-tab-pane>
          <el-tab-pane label="需求" name="00"></el-tab-pane>
          <el-tab-pane label="设计" name="01"></el-tab-pane>
          <el-tab-pane label="开发" name="02"></el-tab-pane>
          <el-tab-pane label="测试" name="04"></el-tab-pane>
          <el-tab-pane label="缺陷" name="05"></el-tab-pane>
          <el-tab-pane label="其他" name="06"></el-tab-pane>
        </el-tabs>
      </div>
      <div class="task-table">
        <div class="task_list" v-for="item in taskForm">
          <div class="task_list_left">
            <chooseStatus :taskForm="item" style="margin-right: 10px;"></chooseStatus>
            <el-tooltip effect="dark" :content="item.name" placement="right">
              <span class="task-table-item-title" @click="detailsClick(item)">{{ item.name }}</span>
            </el-tooltip>
            <el-tooltip effect="dark" content="需求" placement="right">
              <span class="task-table-item-status">{{ item.taskType | taskTypeFilter }}</span>
            </el-tooltip>
            <span class="task-table-item-date" v-if="item.startDate!=null">{{ item.startDate }} - {{
                item.endDate
              }}</span>
            <span class="task-table-item-overdue"
                  v-if="item.status!='00'&&item.status!='07'&&item.status!='08'&&item.status!='10'">{{
                beOverdue(item.endDate) ? '逾期' + beOverdue(item.endDate) + '天' : ''
              }}</span>
            <span class="task-table-item-date">{{ item.createDate }}</span>
          </div>
          <div class="task_list_right">
            <div class="task-table-item-member">
              <el-tooltip v-if="item.masterSysUser" effect="dark" :content="item.masterSysUser.userName"
                          placement="right">
                <span class="task-table-item-member-title">{{ item.masterSysUser.userName }}</span>
              </el-tooltip>
              <div v-if="item.masterSysUser" class="task-table-item-member-logo">
                <el-image style="width: 100%;height: 100%;border-radius: 100%" v-if="item.masterSysUser.avatar"
                          :src="item.masterSysUser.avatar">
                </el-image>
                <el-image style="width: 100%;height: 100%;border-radius: 100%" v-else
                          src="https://img2.baidu.com/it/u=2277413437,2773342262&fm=253&fmt=auto&app=120&f=JPEG?w=516&h=500">
                </el-image>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="task-pagination">
        <pagination :autoScroll="false" :pageSizes="pageSizes" v-show="total>0" :pagerCounts="pagerCounts" :total="total"
                    :current.sync="listQuery.current" :size.sync="listQuery.size" @pagination="list"/>
      </div>
    </div>
    <el-empty description="暂无任务" v-if="taskForm.length==0"></el-empty>
    <div v-if="permissionTask() == false">
      <el-empty description="暂无权限"
                :image="img"></el-empty>
    </div>
  </div>
</template>

<script>
import taskIndex from "@/components/task/index.vue";
import pagination from "@/components/Pagination/index.vue";
import {list} from "@/api/task";
import permissionFunc from "@/utils/permission";
import chooseStatus from "@/components/chooseStatus";
import {util} from "echarts";

export default {
  name: "task",
  filters: {
    taskTypeFilter(data) {
      if (data == "00") {
        return "需求";
      } else if (data == "01") {
        return "设计";
      } else if (data == "02") {
        return "开发";
      } else if (data == "04") {
        return "测试";
      } else if (data == "05") {
        return "缺陷";
      } else if (data == "06") {
        return "其他";
      }
    },
  },
  data() {
    return {
      img:require("../../../img/暂无权限 (1).png"),
      activeName: "",
      loading: false,
      refresh: false,
      listQuery: {
        current: 1,
        size: 10,
        parentId: undefined,
        level: undefined,
        taskType: "",
        myTask: 1,
        status: ''
      },
      taskForm: [],
      total: 0,
      pagerCounts: 3,
      taskStatusForm: [{
        value: '00',
        label: '待办的'
      }, {
        value: '01',
        label: '已接收'
      }, {
        value: '02',
        label: '进行中'
      }, {
        value: '07',
        label: '已完成'
      }, {
        value: '08',
        label: '已验收'
      }, {
        value: '11',
        label: '已中止'
      }, {
        value: '09',
        label: '已取消'
      }],
      pageSizes:[10]
    };
  },
  components: {
    taskIndex,
    pagination,
    chooseStatus,
  },
  props: ["itemIndex"],
  created() {
    this.list();
  },
  methods: {
    beOverdue(val) {
      var timestamp1 = new Date(val).getTime(); //结束时间
      var timestamp2 = new Date().getTime(); //现在时间
      var d = parseInt((timestamp1 - timestamp2) / 1000 / (24 * 3600)); //d>0 没到时间  d<0时间已经过了
      if (d < 0) {
        return Math.abs(d);
      } else {
        return null;
      }
    },
    detailsClick(data) {
      console.log(data);
      if (this.type == "contract") {
        this.$router.push({
          path: "/contract/details",
        });
      } else {
        this.$router.push({
          path: "/task/details",
          query: {
            id: data.taskId,
          },
        });
      }
    },
    permissionTask() {
      return permissionFunc.inserted(["app:task:list"]);
    },
    //顶部tab切换
    tabClick(data) {
      console.log(data);
      var _this = this;
      _this.listQuery.current = 1;
      _this.listQuery.size = 10;
      _this.listQuery.taskType = data.name;
      _this.listQuery.status = ''
      _this.list();

      // if (data.index == '0') {
      // 	_this.listQuery.taskType = '00'
      // 	_this.list()
      // } else if (data.index == '1') {
      // 	console.log('我进来1了')
      // 	_this.listQuery.taskType = '01'
      // 	_this.list()
      // } else if (data.index == '2') {
      // 	_this.listQuery.taskType = '02'
      // 	_this.list()
      // } else if (data.index == '3') {
      // 	_this.listQuery.taskType = '04'
      // 	_this.list()
      // } else if (data.index == '4') {
      // 	_this.listQuery.taskType = '05'
      // 	_this.list()
      // } else if (data.index == '5') {
      // 	_this.listQuery.taskType = '06'
      // 	_this.list()
      // }
    },
    // 查询树列表
    list() {
      var _this = this;
      console.log(_this.listQuery);
      this.loading = true;
      this.refresh = true;
      list(_this.listQuery, false).then((res) => {
        const {data} = res;
        this.taskForm = data.records;
        this.total = data.total;
        _this.loading = false;
        _this.refresh = false;
      });
    },
    refreshClick() {
      var _this = this;
      _this.listQuery.current = 1;
      _this.listQuery.size = 10;
      _this.list();
    },
    currentChange(data) {
      var _this = this;
      this.loading = true;
      setTimeout(function () {
        _this.loading = false;
      }, 2000);
    },
    taskDetails() {
      this.$router.push({
        path: "/task/index",
      });
    },
    memberDetails() {
      this.$router.push({
        path: "/member/index",
      });
    },
    upClick() {
      this.$emit("upClick", this.itemIndex);
    },
    downClick() {
      this.$emit("downClick", this.itemIndex);
    },
    statusClick() {
      this.list()
    }
  },
};
</script>

<style scoped>
.task {
  flex-grow: 1;
  height: 400px;
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 0 0 1px #ecedf0;
  background-color: #fff;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  margin-bottom: 20px;
}

.task-header {
  flex: none;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 52px;
  padding: 0 24px;
  justify-content: space-between;
  padding-top: 10px;
  margin-top: 10px;
}

.task-header-border {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: block;
  border-top: 5px solid transparent;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  pointer-events: none;
  border-color: rgb(44, 126, 248);
}

.task-header-title {
  height: 100%;
  display: flex;
  align-items: center;
}

.task-header-title-icon {
  font-size: 16px;
  margin-right: 4px;
  color: #cce2ff;
}

.task-header-title-name {
  min-width: 0;
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: #2e405e;
}

.task-header-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.task-header-actions-icon {
  border-radius: 4px;
  cursor: pointer;
  color: #909aaa;
  font-size: 20px;
  line-height: 24px;
  text-align: center;
}

.task-content {
  margin: 0 4px;
}

.task-table {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /*margin: 0 20px;*/
  display: flex;
  flex-direction: column;
}

.task-pagination {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 16px;
  padding-top: 16px;
}

.refreshRe {
  -webkit-animation: rotate 1.2s linear infinite;
  /*Safari and Chrome*/
}

@keyframes rotate {
  0% {
    transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    /* IE 9 */
    -moz-transform: rotate(360deg);
    /* Firefox */
    -o-transform: rotate(360deg);
  }

  100% {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    /* IE 9 */
    -moz-transform: rotate(0deg);
    /* Firefox */
    -o-transform: rotate(0deg);
  }
}

@-webkit-keyframes rotate {
  0% {
    -moz-transform: rotate(360deg);
  }

  100% {
    -moz-transform: rotate(0deg);
  }
}

/*修改element样式*/
/deep/ .el-tabs__nav-wrap::after {
  background-color: white;
}

/deep/ .el-tabs__item {
  color: #909aaa;
  padding: 0 10px;
}

/deep/ .el-tabs__item.is-active {
  color: #1890ff;
}

.upwardTitle {
  cursor: pointer;
  color: #909aaa;
  font-size: 20px;
  line-height: 24px;
  text-align: center;
  margin-left: 10px;
}

.task_list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  line-height: 30px;
}

.task_list_left {
  display: flex;
}

.task_list_right {
  margin-right: 30px;
}

.task-table-item-title {
  cursor: pointer;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #2e405e;
  font-size: 12px;
  margin-right: 10px;
  width: 180px;
}

.task-table-item-date {
  color: #909aaa;
  margin-right: 10px;
  font-size: 12px;
  width: 160px;
  display: block;
  text-align: right;
}

.task-table-item-overdue {
  font-size: 12px;
  color: #ff4949;
  width: 70px;
  margin-right: 10px;
  text-align: right;
}

.task-table-item-member {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 111px;
  height: 20px;
  text-align: right;
}

.task-table-item-member-title {
  width: 86px;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 10px;
}

.task-table-item-member-title:hover {
  color: #1890ff;
}

.task-table-item-member-logo {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  /* background-color: #e47777; */
}

.task-table-item-status {
  max-width: 52px;
  min-width: 22px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #909aaa;
  margin-right: 10px;
  font-size: 12px;
}
</style>
